<template>
	<div class="mainer-container">
		<el-main>
			<el-row>
				<el-col :span="14">
					<el-form ref="formData" :model="formData" label-width="200px">
						<el-form-item label="邮箱">
							<el-input v-model="formData.name" disabled></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="formData.password" type="password"></el-input>
						</el-form-item>
						<el-form-item label="API-KEY">
							<el-input v-model="formData.api_key"></el-input>
						</el-form-item>
						<el-form-item label="API-SECRET">
							<el-input v-model="formData.api_secret"></el-input>
						</el-form-item>
						<el-form-item label="HOOK-URL">
							<el-input v-model="formData.hook_url"></el-input>
						</el-form-item>
						<el-form-item label="CHANNEL">
							<el-input v-model="formData.channel"></el-input>
						</el-form-item>
						<el-form-item label="余额保护">
							<el-switch @change="edit(formData)" :value="formData.protection === 1 ? true:false" active-color="#67c23a" inactive-color="#e6a23c" active-text="保护" inactive-text="任性"></el-switch>
							<el-tooltip effect="dark" placement="right">
								<div slot="content">系统默认【USDT、HUSD、BTC、ETH、HT、TRX】保留100个币</div>
								<i class="el-icon-warning-outline" style="margin-left: 10px;"></i>
							</el-tooltip>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit()">更 新</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-divider></el-divider>
			<el-table :data="tableData" stripe>
				<el-table-column prop="id" label="序号" sortable align="center"></el-table-column>
				<el-table-column prop="accountId" label="账号" align="center"></el-table-column>
				<el-table-column prop="type" label="账户类型" align="center">
					<template slot-scope="{row}">
						{{row.type.toUpperCase()}}
					</template>
				</el-table-column>
				<el-table-column prop="state" label="状态" align="center">
					<template slot-scope="{row}">
						<el-tag size="medium" type="success" v-if="row.state === 'working'">正常</el-tag>
						<el-tag size="medium" type="warning" v-else-if="row.state === 'lock'">已锁</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="时间" sortable align="center">
					<template slot-scope="{row}">
						{{$Moment(row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
					</template>
				</el-table-column>
			</el-table>
		</el-main>
	</div>
</template>

<script>
	export default {
		name: "userInfo",
		data() {
			return {
				formData: {
					name: "",
					password: "",
					api_key: "",
					api_secret: "",
					hook_url: "",
					channel: "",
					protection: 0
				},
				tableData: []
			}
		},
		created() {
			this.queryInfo();
			this.queryPage();
		},
		methods: {
			onSubmit() {
				this.$confirm('确认更新个人资料嘛？').then(() => {
					this.api.user.edit(this.formData).then(result => {
						this.$message({
							message: result.data.message,
							type: "success"
						});
						this.queryInfo();
						this.queryPage();
					});
				});
			},
			queryPage() {
				this.api.user.accountInfo().then(result => {
					result = result.data;
					if (result.code === 200) {
						this.tableData = result.data;
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			queryInfo() {
				this.api.user.queryInfo().then(result => {
					result = result.data;
					if (result.code === 200) {
						this.formData.name = result.data.name;
						this.formData.password = result.data.password;
						this.formData.api_key = result.data.apiKey;
						this.formData.api_secret = result.data.apiSecret;
						this.formData.hook_url = result.data.hookUrl;
						this.formData.channel = result.data.channel;
						this.formData.protection = result.data.protection;
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			edit(formData) {
				this.formData.protection = (formData.protection === 1) ? 0 : 1;
			}
		}
	}
</script>

<style scoped>
	.mainer-container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 5px;
	}

	.el-pagination {
		width: 100%;
		text-align: center;
	}
</style>
